import React from 'react';
import styled from 'styled-components';

// 为行程单元格设置样式
const CellWrapper = styled.div`
  background-color: ${(props) => (props.isCourse ? '#F7F7F7' : '#fff')};
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* 为删除按钮定位 */
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;

  /* 悬停效果 */
  &:hover {
    background-color: ${(props) => (props.isCourse ? '#e0e0e0' : '#f9f9f9')};
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  /* 选中的行程单元格，使用不同的颜色 */
  &.selected {
    background-color: #4a90e2;
    color: #fff;
  }
`;

// 删除按钮样式
const DeleteButton = styled.button`
  background-color:rgba(65, 189, 241, 0.41);
  color: white;
  border: none;
  padding: 2px 5px;
  font-size: 10px;
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 3px;
  cursor: pointer;

  &:hover {
    background-color: #d9363e;
  }
`;

const Cell = ({ time, day, course, onClick, onDelete, id }) => (
  <CellWrapper isCourse={!!course} onClick={onClick} id={id}>
    {course ? (
      <div>
        <span>{course.name}</span>
        {/* 删除按钮 */}
        <DeleteButton
          onClick={(e) => {
            e.stopPropagation(); // 阻止事件冒泡，避免触发 `onClick`
            onDelete && onDelete(course.id); // 确保传递 course.id
          }}
        >
          删除
        </DeleteButton>
      </div>
    ) : (
      <span style={{ color: '#888' }}>      </span>
    )}
  </CellWrapper>
);

export default Cell;
